<template>
    <div class="container">
        <header>
            <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
        </header>
        <main>
            <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />


            <van-empty description="空空如也~" v-if="cartList.length == 0" />
            <div class="cart-list" v-else>
                <van-swipe-cell v-for="item in cartList">

                    <van-row>
                        <van-col span="2">
                            <van-checkbox style="margin-top: 40px;margin-left: 12px" v-model="item.flag"
                                @click="isSelect(item.cartid, item.flag)"></van-checkbox>
                        </van-col>
                        <van-col span="20">
                            <div>
                                <van-card :price="(item.originprice * item.num).toFixed(2)" :title="item.proname"
                                    class="goods-card" :thumb="item.img1">
                                    <template #num>
                                        <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                                            @change="onChangeNum(item)" />
                                    </template>
                                </van-card>
                            </div>
                        </van-col>
                    </van-row>

                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="onDel(item.cartid)" />
                    </template>
                </van-swipe-cell>

            </div>


        </main>
        <div class="bottom">
            <van-submit-bar :price="allprice" :button-text="`提交订单(${selectedCount})`" @submit="onSubmit">
                <van-checkbox v-model="allSelect">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
                </template>
            </van-submit-bar>

        </div>
    </div>
</template>

<script>
import { getCartList, delCart, isSelect, allSelect, updateNum } from '@/apis/cart';
export default {
    data() {
        return {
            value: 1,
            cartList: [],
            flag: true,
            // checked: Boolean
        }
    },
    created() {
        getCartList({ userid: localStorage.getItem("userid") }).then(res => {
            // console.log(res);
            this.cartList = res.data.data || []
        })
    },
    methods: {
        onSubmit() {
            this.$router.push('/order')
        },
        onClickLink() {
            this.$router.go(0)
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        onDel(cartid) {
            delCart({ cartid }).then(res => {
                if (res.data.code !== '200') return showToast('删除失败')
                // 前端同步移除
                this.cartList = this.cartList.filter(item => item.cartid !== cartid)
                showToast('已删除')

            })
        },
        isSelect(cartid, flag) {
            isSelect({ cartid, flag }).then(res => {
                // console.log(res)
                if (res.data.code === 200) {
                    this.flag == true
                } return this.flag == false

            })
            // console.log(flag);
        },
        // 数量变化 → 立即写回后端
        onChangeNum(item) {
            updateNum({
                cartid: item.cartid,
                num: item.num
            }).then(res => {
                if (res.data.code != 200) {
                    showToast('更新数量失败')
                }
            })
        }
    },
    // 计算属性
    computed: {
        allSelect: {
            get() {
                return this.cartList.length && this.cartList.every(item => item.flag)
            },
            set(value) {
                // 一键改本地
                this.cartList.forEach(item => (item.flag = value))
                // 同步后端
                allSelect({ userid: localStorage.getItem('userid'), selected: value })
            }
        },
        allprice() {
            return this.cartList
                .filter(item => item.flag)           // 只算勾选的
                .reduce((sum, item) => sum + item.originprice * item.num, 0) * 100   // 转为分
        },
        selectedCount() {
            return this.cartList
                .filter(item => item.flag)          // 只算已选
                .reduce((sum, item) => sum + item.num, 0)   // 把件数累加
        }
    }
}
</script>

<style lang="less" scoped>
.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
    margin-left: 5px;
}

.bottom {
    margin-top: 40px;
}
</style>